<template>
	<view class="container">
		<view class="time">
			<!-- <view class="tit">
				<text>起始时间</text>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="start_time" @change="bindDateChange">
						<view class="uni-input">{{start_time}}</view>
					</picker>
				</view>
			</view>
			<view class="tit">
				<text>结束时间</text>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="start_time" @change="bindDateChange1">
						<view class="uni-input">{{end_time}}</view>
					</picker>
				</view>
			</view> -->
			<view class="tit" @click="popup">
				<text>机柜状态</text>
				<view>
					<text>{{name}}</text>
				</view>
			</view>
			<view class="search" @click="search('')">
				<text>查询</text>
			</view>
		</view>

		<scroll-view class="content" v-if="useLog.length !=0" scroll-y="true" @scrolltolower="loadMore">
			<view class="list">
				<view class="list_item">
					<view class="tit">
						<text>共<text class="offline"> {{total}} </text>个机柜</text>
						<!-- <text><text class="offline"> {{use_count}} </text>使用</text> -->
						<text></text>
					</view>
				</view>
				<view class="list_item" v-for="(item,index) in useLog" :key="item.id">
					<view>
						<text>{{item.name}}</text>
						<text class="offline">{{item.all_income}}</text>
					</view>
					<view>
						<text class="qian">机柜状态：
							<text v-if="item.line_sate == 1" class="electric">{{item.line_state_text}}</text>
							<text v-if="item.line_sate == 0" class="offline">{{item.line_state_text}}</text>
							<text class="fankui">硬件反馈：</text>
							<text v-if="item.state == 1" class="electric">{{item.state_text}}</text>
							<text v-if="item.state == 0" class="offline">{{item.state_text}}</text>
						</text>
						<text class="qian">{{item.dianci_use}}/{{item.dianci_count}}</text>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<view class="empty" v-else>
			暂无机柜
		</view>

		<view class="mask" v-if="operation">
			<view class="operation">
				<view class="radio" v-for="(item,index) in list" :key="item.id">
					<radio value="r1" :checked="item.isCheck" color="#34ACEF" @click="radio(index)" />
					<text @click="radio(index)">{{item.name}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mentList,
		lineStation
	} from '../../api/api.js'
	export default {
		data() {
			return {
				start_time: '-',
				end_time: '-',
				name: '全部',
				device_id: -1,
				operation: false,
				info: false,
				total: 0,
				use_count: 0,
				list: [{
						name: '全部',
						id: -1,
						isCheck: true
					},
					{
						name: '掉线',
						id: 0,
						isCheck: false
					}, {
						name: '在线',
						id: 1,
						isCheck: false
					}
				],
				useLog: [],
				total: 0,
				last_page: 1,
				current_page: 1,
				per_page: 10
			}
		},
		onLoad() {
			this.search()
		},
		methods: {
			popup() {
				this.operation = true
			},
			bindDateChange: function(e) {
				this.start_time = e.target.value
			},
			bindDateChange1: function(e) {
				this.end_time = e.target.value
			},
			radio(index) {
				for (let i = 0; i < this.list.length; i++) {
					this.list[i].isCheck = false
				}
				this.list[index].isCheck = true
				this.device_id = this.list[index].id
				this.name = this.list[index].name
				this.operation = false
			},
			loadMore(e) {
				if (this.current_page < this.last_page) {
					this.current_page += 1
					this.search('loadMore')
				}
			},
			search(loadMore) {
				console.log(loadMore)
				lineStation({
					// start_time: this.start_time,
					// end_time: this.end_time,
					state: this.device_id,
					limit: this.per_page,
					page: this.current_page
				}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						if (loadMore) {
							for (let i = 0; i < res.data.data.length; i++) {
								this.useLog.push(res.data.data[i])
							}
						} else {
							this.useLog = res.data.data
						}
						this.info = true
						this.total = res.data.total
						this.last_page = res.data.last_page
						// this.current_page = res.data.current_page
						this.use_count = res.data.use_count
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #f6f6f6;
	}

	.time {
		width: 100%;
		padding: 30upx 0;
		background-color: #FFFFFF;

		.tit {
			width: calc(100% - 60upx);
			height: 100upx;
			background-color: #FFFFFF;
			padding: 0 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10upx;

			text {
				font-size: 28upx;
			}

			view {
				width: 70%;
				height: 80upx;
				border-radius: 10upx;
				border: 1upx solid #69aacf;
				display: flex;
				justify-content: center;
				align-items: center;

				picker {
					width: 100%;


					view {
						width: 100%;
						border: 0;
					}
				}

			}

		}

		.search {
			width: 90%;
			height: 90upx;
			margin: 30upx auto;
			background-color: #3eb9ff;
			border-radius: 50upx;
			color: #FFFFFF;
			line-height: 90upx;
			text-align: center;
		}

	}

	.content {
		width: 100%;
		margin-top: 30upx;
		height: calc(100% - 400upx);
		background-color: #FFFFFF;

		.list {

			.list_item {
				width: calc(100% - 60upx);
				padding: 0 30upx;
				border-bottom: 1upx solid #f9f9f9;
				font-size: 28upx;

				.tit {
					.offline {
						color: #fbacb6;
					}
				}

				view {
					width: 100%;
					height: 60upx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.electric {
						color: #64c4b2;
					}

					.offline {
						color: #fbacb6;
					}

					.qian {
						color: #999;

						.fankui {
							margin-left: 20upx;
						}

					}

				}

			}
		}

	}
	
	.empty{
		width: 100%;
		height: 100upx;
		text-align: center;
		line-height: 100upx;
		margin-top: 30upx;
	}

	.mask {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		z-index: 99;
		background: rgba($color: #000000, $alpha: 0.3);
		display: flex;
		align-items: center;
		justify-content: center;

		.operation {
			width: 580upx;
			min-height: 200upx;
			padding: 10upx 30upx;
			background: #FFFFFF;
			border-radius: 12px;
			position: relative;

			.radio {
				height: 60upx;
				margin-top: 30upx;
				font-size: 32upx;
				color: #666;

				radio {
					transform: scale(0.8);
					margin: 0 20upx;
				}
			}
		}
	}
</style>
